<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form
        :inline="true"
        size="small"
        :model="user"
        ref="ruleForm"
        class="demo-form-inline"
      >
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="user.userId" placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="user.userName"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="user.state" placeholder="请选择状态">
            <el-option label="所有" value="0"></el-option>
            <el-option label="在职" value="1"></el-option>
            <el-option label="离职" value="2"></el-option>
            <el-option label="试用期" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchUser">查询</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button size="small" type="primary" @click="handleOpen"
          >新增</el-button
        >
        <el-button size="small" type="danger" @click="handleDels"
          >批量删除</el-button
        >
      </div>
      <el-table
        @selection-change="handleSelectionChange"
        :data="userList"
        size="mini"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="(item, index) in tableData"
          :key="index"
          :prop="item.prop"
          :label="item.lable"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 用户新增编辑弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form
        :model="userForm"
        :rules="rules"
        ref="userForm"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="userForm.userName"
            autocomplete="off"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="userEmail">
          <el-input
            v-model="userForm.userEmail"
            autocomplete="off"
            placeholder="请输入用户邮箱"
          >
            <template slot="append">@imocc.com</template>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="userForm.mobile"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位" prop="job">
          <el-input
            v-model="userForm.job"
            autocomplete="off"
            placeholder="请输入岗位"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="userForm.state" placeholder="请选择用户状态">
            <el-option label="在职" value="1"></el-option>
            <el-option label="离职" value="2"></el-option>
            <el-option label="试用期" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统角色" prop="roleList">
          <el-select
            v-model="userForm.roleList"
            multiple
            placeholder="请选择系统角色"
            style="width: 100%"
          >
            <el-option
              v-for="item in roleList"
              :key="item._id"
              :label="item.roleName"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-cascader
            placeholder="请选择部门"
            v-model="userForm.deptId"
            :options="deptList"
            :props="{ checkStrictly: true, label: 'deptName', value: '_id' }"
            clearable
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddAndEditUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      title: "",
      user: {
        state: '0',
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      userForm: {
        action: "",
        userName: "",
        userEmail: "",
        mobile: "",
        job: "",
        state: '',
        roleList: [],
        deptList: [],
      },
      roleList: [],
      deptList: [],
      userList: [],
      userIds: [],
      dialogFormVisible: false,
      rules: {
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        userEmail: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
        ],
        // deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
      },
      tableData: [
        {
          lable: "用户ID",
          prop: "userId",
          width: "",
        },
        {
          lable: "用户名",
          prop: "userName",
          width: "",
        },
        {
          lable: "用户邮箱",
          prop: "userEmail",
          width: "",
        },
        {
          lable: "用户角色",
          prop: "role",
          width: "",
          formatter(row, column, value) {
            let role = {
              0: "超级管理员",
              1: "普通用户",
            };
            return role[value];
          },
        },
        {
          lable: "用户状态",
          prop: "state",
          width: "",
          formatter(row, column, value) {
            let state = {
              0: "所有",
              1: "在职",
              2: "离职",
              3: "试用期",
            };
            return state[value];
          },
        },
        {
          lable: "注册时间",
          prop: "createTime",
          width: "",
          formatter(row, column, value) {
            return moment
              .parseZone(value)
              .local()
              .format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          lable: "最后登录时间",
          prop: "lastLoginTime",
          width: "",
          formatter(row, column, value) {
            return moment
              .parseZone(value)
              .local()
              .format("YYYY-MM-DD HH:mm:ss");
          },
        },
      ],
    };
  },
  mounted() {
    this.getUserList();
    this.getRoleList();
    this.getDeptList();
  },
  methods: {
    async getUserList() {
      let res = await this.userApi.getUserList(this.user);
      this.userList = res.list;
      this.total = res.page.total;
    },
    changePage(page) {
      this.user.pageNum = page;
      this.getUserList();
    },
    searchUser() {
      this.getUserList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getUserList();
    },
    // 删除单个用户
    async handleDel(row) {
      this.userIds.push(row.userId);
      let res = await this.userApi.removeUser(this.userIds);
      this.userIds = [];
      this.getUserList();
    },
    // 删除多个用户
    async handleDels() {
      if (this.userIds.length === 0) {
        this.$message.error({
          message: "请选择要删除的用户",
          offset: 100,
        });
        return false;
      } else {
        let res = await this.userApi.removeUser(this.userIds);
        this.userIds = [];
        this.getUserList();
      }
    },
    // 得到选中用户的id
    handleSelectionChange(list) {
      let arr = [];
      list.forEach((item) => {
        arr.push(item.userId);
      });
      this.userIds = arr;
    },
    // 打开新增弹窗
    handleOpen() {
      this.dialogFormVisible = true;
      this.userForm.action = "add";
      this.title = "用户新增";
    },
    // 获取角色列表
    async getRoleList() {
      let res = await this.userApi.getRoleList();
      this.roleList = res;
    },
    async getDeptList() {
      let res = await this.userApi.getDeptList();
      this.deptList = res;
    },
    // 添加和编辑用户
    AddAndEditUser() {
      this.$refs["userForm"].validate(async (valid) => {
        if (valid) {
          let res = await this.userApi.createAndeditUser(this.userForm);
          this.dialogFormVisible = false;
          this.getUserList();
        } else {
          this.$message.error({
            message: "输入内容有误, 请重新输入",
            offset: 100,
          });
          return false;
        }
      });
    },
    // 编辑用户
    editUser(data) {
      this.dialogFormVisible = true;
      this.title = "用户编辑";
      this.$nextTick(() => {
        Object.assign(this.userForm, data);
      });
      this.userForm.action = "edit";
    },
  },
};
</script>

<style scoped >
</style>
